<template>
  <div id="carriage-tpml-setting">
    <!-- 新增模板按钮 -->
    <div class="line">
      <router-link to="/carriage/add">
        <button type="button" class="btn-add"><i class="add">+</i> 新增模板</button>
      </router-link>
    </div>
    <!-- 平台配置的运费模板 -->
    <div class="line transition-ease" v-for="(tmpl, index) in platformTmpls" :class="{leave: tmpl.id == leaveId}" :key="index">
      <carriage-tmpl :type="tmpl.type" :tmpl="tmpl" :readonly="true" @delete="deleteTmplId"></carriage-tmpl>
    </div>
    <!-- 个人配置的运费模板 -->
    <div class="line transition-ease" v-for="(tmpl, index) in carriageTmpls" :class="{leave: tmpl.id == leaveId}" :key="index">
      <carriage-tmpl :type="tmpl.type" :tmpl="tmpl" @delete="deleteTmplId"></carriage-tmpl>
    </div>
  </div>
</template>

<script>
// 导入运费模板
import carriageTmpl from './carriageTmpl'

// 获取所有的地址信息
import { apiCarriage } from '../../common/api.js'

export default {
  components: {
    carriageTmpl
  },
  data() {
    return {
      carriageTmpls: [],
      platformTmpls: [],
      leaveId: ''
    }
  },
  created() {
    // 加载模板
    this.handlerTransportList()
  },
  methods: {
    /**
     * 加载商家配置的物流模板
     */
    handlerTransportList() {
      apiCarriage.getTransportList(this.$store.getters.token).then((data) => {
        this.platformTmpls = data.platformList
        this.carriageTmpls = data.list
      })
    },

    /**
     * 删除模板id
     *
     * @param  { Number } tmplId 模板ID
     */
    deleteTmplId(tmplId) {
      this.leaveId = tmplId

      // 请求一下接口
      this.handlerTransportList()
    }
  }
}
</script>

<style lang="scss" scoped>
#carriage-tpml-setting {
  .line {
    margin-top: 30px;

    .add {
      font-size: 18px;
    }

    &.leave {
      opacity: 0;
    }

    &:first-child {
      margin-top: 0px;
    }
  }
}
</style>